<%-- 
    Document   : PersonalSpace1
    Created on : Dec 6, 2009, 6:23:26 PM
    Author     : zhi
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">


<%@page import="Service.*, javabeans.*, java.util.*"%>
<%!
    ArrayList<PersonalPlan> personalPlanList;
    ArrayList<ChannelTGroup> groupList;
    PersonalPlan pp1, pp2, pp3, pp4;
    ChannelTGroup g1, g2, g3, g4;
%>

<%
    personalPlanList = new ArrayList<PersonalPlan>();
    groupList = new ArrayList<ChannelTGroup>();
    pp1 = new PersonalPlan();
    pp2 = new PersonalPlan();
    pp3 = new PersonalPlan();
    pp4 = new PersonalPlan();
    g1 = new ChannelTGroup();
    g2 = new ChannelTGroup();
    g3 = new ChannelTGroup();
    g4 = new ChannelTGroup();
    pp1.setPlanid(1001); pp1.setPlanname("plan1");
    pp2.setPlanid(1002); pp2.setPlanname("plan2");
    pp3.setPlanid(1003); pp3.setPlanname("plan3");
    pp4.setPlanid(1004); pp4.setPlanname("plan4");
    g1.setGroupid("g001"); g1.setGroupname("group1");
    g2.setGroupid("g002"); g2.setGroupname("group2");
    g3.setGroupid("g003"); g3.setGroupname("group3");
    g4.setGroupid("g004"); g4.setGroupname("group4");
    personalPlanList.add(pp1);
    personalPlanList.add(pp2);
    personalPlanList.add(pp3);
    personalPlanList.add(pp4);
    groupList.add(g1);
    groupList.add(g2);
    groupList.add(g3);
    groupList.add(g4);
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="Stylesheet" type="text/css" href="./extjs3.0/resources/css/ext-all.css"/>
        <link rel="Stylesheet" type="text/css" href="./css/personal-space.css"/>

        <script type="text/javascript" src="./extjs3.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="./extjs3.0/ext-all-debug.js"></script>
        <script type="text/javascript" src="./js/personal-space-newplan.js"></script>
        <script type="text/javascript">
            var userid = '<%= request.getParameter("userid")%>';
        </script>
        <title>Personal Space</title>
    </head>
    <body>
        <div id="pageTitle">My personal page</div>
        <input type="button" name="newPersonalPlan" value="New personal plan" onclick="newPersonalPlan()"/>
        <table border="1" class="mySpaceTable">
            <tbody>
                <tr>
                    <td id="tPersonalPlan">
                        <h2>My Personal Plan</h2>
                        <%
                            // get all the plan and display
                            PersonalPlan pp;
                            for(int i=0;i<personalPlanList.size();i++) {
                                pp = (PersonalPlan)personalPlanList.get(i);
                        %>
                                <!--html for rounded rectangle border of the personal plan-->
                                <div class="personalPlan">
                                    <a href="PersonalPlan.jsp?action=viewPlan&planid=<%= pp.getPlanid()%>">
                                    <%--<a href="PersonalPlan.jsp?action=viewPlan&planid=<%= pp.getPlanid()%>&userid=<%= pp.getM().getId()%>">--%>
                                        <b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
                                            <div class="b d1 k">
                                                <%= pp.getPlanname()%>
                                            </div>
                                        <b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
                                     </a>
                                </div>
                        <%
                            }
                        %>
                    </td>
                </tr>
                <tr>
                    <td id="tGroup">
                       <h2>My Groups</h2>
                       <a href="ViewAllGroups.jsp" style="text-decoration: none">View all groups</a>

                    </td>
                </tr>
            </tbody>
        </table>

    </body>
</html>